<template>
  <el-card style="width: 85rem; height: 105rem; margin:2rem auto 0px;">
    <div style="font-size: 20px;color: black; margin-bottom: 20px;">
      <button style="width: 7px; height: 20px; border-radius: 3px; background-color: rgb(41, 132, 248); border-width: 0; padding: 0"></button>
      <span style="margin-left: 10px;">居民管理</span>
    </div>
    <el-form label-width="70px" label-position="left" :inline="true" style="position: relative">
      <el-form-item label="签约状态">
        <el-select placeholder="请选择" v-model="searchResidentForm.status">
          <el-option label="请选择" value="0"></el-option>
          <el-option label="待签约" value="1"></el-option>
          <el-option label="签约中" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="签约机构">
        <el-select placeholder="请选择" v-model="searchResidentForm.institution">
          <el-option label="请选择" value="0"></el-option>
          <el-option v-for="item in institutionArr" :label="item.name" :value="item.id"></el-option>
<!--          <el-option label="罗西社区服务中心" value="10"></el-option>-->
<!--          <el-option label="天明社区服务中心" value="20"></el-option>-->
<!--          <el-option label="民进社区服务中心" value="30"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item label="医生">
        <el-select placeholder="请选择" v-model="searchResidentForm.doctor">
          <el-option label="请选择" value="0"></el-option>
          <el-option label="王浩" value="10"></el-option>
          <el-option label="胡曼" value="20"></el-option>
          <el-option label="李维" value="30"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="position: absolute; right: 0;">
        <el-button type="primary" @click="router.push('/editResident')" style="width: 130px; height: 45px; font-size: 15px;">新增居民档案</el-button>
        <el-button plain @click="exportData" class="deport">导出</el-button>
      </el-form-item>
      <br>
      <el-form-item label="服务项目">
        <el-select placeholder="请选择" v-model="searchResidentForm.items">
          <el-option label="请选择" value="0"></el-option>
          <el-option v-for="item in serviceItemsArr" :label="item.name" :value="item.id"></el-option>
          <!--          <el-option label="高血压" value="10"></el-option>-->
<!--          <el-option label="糖尿病" value="20"></el-option>-->
<!--          <el-option label="冠心病" value="30"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入关键字" style="width:400px;" :suffix-icon="Search" v-model="content" @keydown.enter="loadResident"></el-input>
      </el-form-item>
    </el-form>

    <div v-if="isLoaded" style="margin-top: 20px" >
      <el-row :gutter="50" v-for="num in 5">
        <el-col :span="6" v-for="item in ResidentArr.slice((currentPage - 1) * pageSize, currentPage * pageSize).slice((num - 1) * 4, num * 4)" style="width:100%;">
          <el-card @click="router.push('/residentDetail?id='+item.id)">
            <div style="display: flex; justify-content: center; margin-bottom: 20px">
              <el-avatar v-if="item.gender==1" src="/img/common/male.png" style="width:70px;height:70px; box-shadow: 0px 0px 5px 5px rgb(244, 244, 244);"></el-avatar>
              <el-avatar v-else src="/img/common/female.jpg" style="width:70px;height:70px; box-shadow: 0px 0px 5px 5px rgb(244, 244, 244);"></el-avatar>
            </div>
            <div style="display: flex; justify-content: center; margin-bottom: 10px">
              <span style="font-size: 20px; color: black;">{{ item.name }}</span>
              <span style="color: #999999; margin-left: 5px; font-size: 15px; position: relative; top:5px">{{ item.age }}岁</span>
              <img src="/img/common/grey_tip.png" alt="" width="9px" height=13px style="transform: rotate(-25deg); margin-left: 15px; position: relative; top:10px">
            </div>
            <el-button style="width: 80px; height: 30px; font-size: 13px;  display: block; margin: 0 auto 25px; color: white; background-color: rgb(40, 208, 148); border-radius: 15px; border: 0">{{ item.status == 1 ? '签约中' : '待签约' }}</el-button>
            <div style="display: flex; justify-content: center; font-size: 12px;">
              <el-button v-if="item.disease.length > 0" style="width: 70px; height: 30px; color: rgb(250, 116, 107); background-color: rgb(255, 241, 240); border-radius: 12px; border: 0">{{ item.disease[0] }}</el-button>
              <el-button v-if="item.disease.length > 1" style="width: 70px; height: 30px; color: rgb(121, 126, 244); background-color: rgb(241, 242, 254); border-radius: 12px; border: 0">{{ item.disease[1] }}</el-button>
              <el-button v-if="item.disease.length > 2" style="width: 70px; height: 30px; color: rgb(253, 219, 120); background-color: rgb(255, 251, 242); border-radius: 12px; border: 0">{{ item.disease[2] }}</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :total="ResidentArr.length"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        style="text-align:center; margin-top:20px; margin-bottom:5px; display:flex;  justify-content:flex-end">>
    </el-pagination>
  </el-card>
</template>

<script setup>
  import {onMounted, ref} from "vue";
  import axios from "axios";
  import qs from "qs";
  import {ElMessage} from "element-plus";
  import router from "@/router";
  import { Search } from '@element-plus/icons-vue'

  const isLoaded = ref(false);

  onMounted(() => {
    loadResident();
  });

  const searchResidentForm = ref({status:'', institution:'', doctor:'', items:''});
  const content = ref('');
  const ResidentArr = ref([]);

  const loadResident = () => {
    isLoaded.value = false;
    axios.get(BASE_URL + '/hhmc/patient/list/').then((response) => {
      if (response.data.code == 2000) {
        ResidentArr.value = response.data.data;
        if (content.value != '') {
          for (let i = ResidentArr.value.length - 1; i >= 0; i--) {
            const valuesArray = Object.values(ResidentArr.value[i]).map(String);
            let isIncluded = valuesArray.some(value => value.includes(content.value));
            if (!isIncluded) {
              ResidentArr.value.splice(i, 1);
            }
          }
        }
      } else {
        ElMessage.error(response.data.msg);
      }
      isLoaded.value = true;
    })
  }

  const currentPage = ref(1);
  const pageSize = ref(20);

  const handleCurrentChange = (page) => {
    currentPage.value = page; //每次点击分页按钮，当前页发生变化
  }

  const exportData = () => {
    ElMessage.success('导出成功!');
  };
</script>

<style scoped>
  :deep(.el-select) {
    width: 220px;

    .el-select__wrapper {
      height: 45px;
    }
  }

  :deep(.el-form-item__label) {
    height: 45px;
    line-height: 45px;
    color: #999999;
  }

  .deport {
    width: 70px;
    height: 45px;
    font-size: 15px;
    border-color: #409EFF;
    background-color: white;
    color: #409EFF;
  }

  .deport:hover {
    background-color: #409EFF !important;
    color: white !important;
  }

  :deep(.el-input__wrapper) {
    height: 45px;
  }

  :deep(.el-form .el-input) {
    width: 220px;

    .el-input__inner {
      border: 0;
      height: 45px;
    }

    .el-input__icon {
      height: 45px;
      font-size: 18px;
    }
  }

  :deep(.el-pagination .el-input) {
    .el-input__wrapper {
      height: 35px;

      .el-input__inner {
        border: 0;
        height: 35px;
      }
    }
  }


  :deep(.el-row) {
    margin-bottom: 25px;
    padding: 0 20px;

    .el-card {
      background-color: white;
    }

    .el-card:hover {
      background-color: rgb(242, 247, 251);
      cursor: pointer;
    }
  }

</style>